@extends('admin.common.admin')

@section('cnt')
    {{-- 面包屑导航 --}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 文章管理
        <span class="c-gray en">&gt;</span> 修改文章
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{-- 消息提示 --}}
        @include('admin.common.msg')

        <form class="form form-horizontal" id="addarticle" method="post" action="{{ route('admin.article.update',$article) }}">
            @csrf
            @method('PUT')
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章分类：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width: 200px">
				<select id="pid" name="cate_id" class="select">
                    <option value="0">==请选择文章分类==</option>
                    @foreach($cateData as $item)
                        <option pid="{{ $item['pid'] }}"
                                value="{{ $item['id'] }}" @if($article->cate_id==$item['id']) selected @endif>{{ $item['html'] }}{{ $item['cname'] }}</option>
                    @endforeach
				</select>
				</span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>文章标题：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ $article->title }}" name="title">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>文章描述：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ $article->desn }}" name="desn">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>文章作者：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ $article->author }}" name="author">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>文章封面：</label>
                <div class="formControls col-sm-10">
                    <div id="picker">选择封面文件</div>
                    <input type="hidden" value="{{$article->pic}}" name="pic" id="pic">
                    <div class="showpic">
                        <img src="{{$article->pic}}" id="showpic" style="width: 100px;">
                        <span>x</span>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>文章内容：</label>
                <div class="formControls col-sm-10">
                    <textarea name="body" id="body" cols="30" rows="10">{{$article->body}}</textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-sm-10 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="submit" value="修改文章">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('css')
    <link rel="stylesheet" href="/admin/lib/webuploader/0.1.5/webuploader.css" />
    <style>
        .showpic{
            position:relative;
            width: 100px;
            display: inline-block;
        }
        .showpic span{
            position: absolute;
            top:-6px;
            right: 2px;
            color: red;
            cursor: pointer;
        }
    </style>
@endsection
@section('js')
    {{--富文本js引入--}}
    <script src="/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    {{--异步文件上传插件js--}}
    <script src="/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script>
        // 用于csrf验证的
        const TOKEN = "{{ csrf_token() }}";
        // 异步文件上传 发起POST请求 post触发csrf验证
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/admin/lib/webuploader/0.1.5/Uploader.swf',
            // 上传文件处理的后台路由
            server: "{{ route('admin.article.upfile') }}",
            // 选择文件的按钮。可选。
            pick: '#picker',
            // 额外参数
            formData:{
                _token:TOKEN
            },
            // 表单域名称
            fileVal:'file',
            // 压缩
            resize: true,
            // 只上传图片
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 回调方法 上传成功后完成的方法
        uploader.on( 'uploadSuccess', function( file,response ) {
            $('#pic').val(response.pic)
            $('#showpic').attr('src',response.pic)
        });
        // 富文本初始化
        const ue = UE.getEditor('body', {
            // 初始化编辑器高度
            initialFrameHeight: 400,
        });

        // 下拉事件
        $('#pid').change(function () {
            let pid = $(this).find("option:selected").attr('pid')
            if (pid == 0) {
                layer.msg('您不能选中顶级分类', {icon: 2, time: 2000});
            }
        })

        // 表单验证
        $("#addarticle").validate({
            // 验证规则
            rules: {
                title: {
                    required: true
                },
                desn:{
                    required: true
                },
                author:{
                    required: true
                },
                pic:{
                    required:true
                }
            },
            // 取消回车事件
            onkeyup: false,
            // 验证成功时的样式名称
            success: "valid",
            // 验证成功后，回调事件  form dom对象
            submitHandler: function (form) {
                // js 表单提交
                form.submit();
            }
        });
        //绑定事件，删除图片
        $('.showpic span').click(function () {
            //获取图片地址
            let path=$('#showpic').attr('src');
            //ajax删除图片
            $.get('{{route("admin.article.delpic")}}',{path}).then(ret=>{
                $('#showpic').attr('src','');
                $('#pic').val('');
            });
        })
    </script>
@endsection

